<template>
    <el-drawer v-model="visible" :title="titleMap[mode]" direction="rtl" size="800" destroy-on-close @closed="$emit('closed')">
        <el-main>
            <el-form :model="form" :rules="rules" ref="dialogForm" :disabled="mode==='show'" label-width="80px" label-position="left">
                <el-form-item label="显示名称" prop="menuName">
                    <el-input v-model="form.menuName" clearable placeholder="菜单显示名字"></el-input>
                </el-form-item>
                <el-form-item label="上级菜单" prop="parentId">
                    <sc-table-select v-model="defaultValue" :apiObj="apiObj" :props="menuProps" :params="menuParams" :show-all-levels="false" placeholder="顶级菜单" @change="changeSelect" clearable>
                        <template #header="{form, submit}">
                            <el-form :inline="true" :model="form">
                                <el-form-item>
                                    <el-input v-model="form.menuName" placeholder="菜单名称" clearable :teleported="false"/>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="submit">查询</el-button>
                                </el-form-item>
                            </el-form>
                        </template>
                        <el-table-column prop="menuName" label="菜单名称" width="180"></el-table-column>
                        <el-table-column prop="menuType" label="类型"></el-table-column>
                    </sc-table-select>
                </el-form-item>
                <el-form-item label="类型" prop="menuType">
                    <sc-radio v-model="form.menuType" dict="MENU_TYPE" filterable style="width: 100%;"></sc-radio>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-switch v-model="form.status" active-value="ENABLED" inactive-value="DISABLED"></el-switch>
                </el-form-item>
                <el-form-item label="别名" prop="alias">
                    <el-input v-model="form.alias" clearable placeholder="菜单别名"></el-input>
                    <div class="el-form-item-msg">系统唯一且与内置组件名一致，否则导致缓存失效。如类型为Iframe的菜单，别名将代替源地址显示在地址栏</div>
                </el-form-item>
                <el-form-item label="视图" prop="component" v-if="form.menuType==='MENU'">
                    <el-input v-model="form.component" clearable placeholder="">
                        <template #prepend>views/</template>
                    </el-input>
                    <div class="el-form-item-msg">如父节点、链接或Iframe等没有视图的菜单不需要填写</div>
                </el-form-item>
                <el-form-item label="路由地址" prop="path">
                    <el-input v-model="form.path" clearable placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="菜单高亮" prop="meta.active">
                    <el-input v-model="form.meta.active" clearable placeholder=""></el-input>
                    <div class="el-form-item-msg">子节点或详情页需要高亮的上级菜单路由地址</div>
                </el-form-item>
                <el-form-item label="重定向" prop="meta.redirect">
                    <el-input v-model="form.meta.redirect" clearable placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="菜单图标" prop="meta.icon">
                    <sc-icon-select v-model="form.meta.icon" clearable></sc-icon-select>
                </el-form-item>
                <el-form-item label="颜色" prop="meta.color">
                    <el-color-picker v-model="form.meta.color" :predefine="predefineColors"></el-color-picker>
                </el-form-item>
                <el-form-item label="是否隐藏" prop="meta.hidden">
                    <el-checkbox v-model="form.meta.hidden" true-label="YES" false-label="NO">隐藏菜单</el-checkbox>
                    <el-checkbox v-model="form.meta.breadcrumb" true-label="YES" false-label="NO">隐藏面包屑</el-checkbox>
                    <div class="el-form-item-msg">菜单不显示在导航中，但用户依然可以访问，例如详情页</div>
                </el-form-item>
                <el-form-item label="整页路由" prop="meta.fullPage">
                    <el-switch v-model="form.meta.fullPage" active-value="YES" inactive-value="NO"/>
                </el-form-item>
                <el-form-item label="固定页签" prop="meta.affix">
                    <el-switch v-model="form.meta.affix" active-value="YES" inactive-value="NO"/>
                </el-form-item>
                <el-form-item label="标签" prop="meta.tag">
                    <el-input v-model="form.meta.tag" clearable placeholder=""></el-input>
                </el-form-item>
            </el-form>
        </el-main>
        <template #footer>
            <div style="text-align: left">
                <el-button @click="visible=false">取 消</el-button>
                <el-button v-if="mode!=='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script>
import scIconSelect from '@/components/scIconSelect'

export default {
    components: {
        scIconSelect
    },
    props: {
        selection: {
            type: Object, default: () => {
            }
        },
    },
    data() {
        return {
            mode: "add",
            titleMap: {
                add: '新增',
                edit: '编辑'
            },
            apiObj: this.$API.system.menu,
            menuParams: {
                menuTypeList: 'CATALOG,MENU'
            },
            visible: false,
            isSaveing: false,
            form: {
                id: "",
                parentId: "0",
                menuType: "MENU",
                path: "",
                component: "",
                status: "ENABLED",
                meta: {
                    icon: "",
                    active: "",
                    color: "",
                    redirect: "",
                    hidden: "NO",
                    breadcrumb: "NO",
                    fullPage: 'NO',
                    affix: 'NO',
                    tag: "",
                },
                apiList: []
            },
            menuProps: {
                label: 'menuName',
                value: 'id',
                keyword: "keyword"
            },
            defaultValue: {id: '0', menuName: '顶级菜单'},
            predefineColors: [
                '#ff4500',
                '#ff8c00',
                '#ffd700',
                '#67C23A',
                '#00ced1',
                '#409EFF',
                '#c71585'
            ],
            rules: {
                menuName: [{required: true, message: '请输入菜单名称'}],
                alias: [{required: true, message: '请输入别名'}],
                component: [{required: true, message: '请输入视图'}],
            }
        }
    },
    mounted() {

    },
    methods: {
        //显示
        open(mode = 'add') {
            this.mode = mode;
            this.visible = true;
            return this;
        },
        //表单提交方法
        submit() {
            this.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    this.isSaveing = true;
                    const res = this.mode === 'add' ? await this.$API.system.menu.post(this.form) : await this.$API.system.menu.put(this.form);
                    this.isSaveing = false;
                    if (res.code === 200) {
                        this.$emit('success', this.form, this.mode)
                        this.visible = false;
                        this.$message.success("操作成功")
                    } else {
                        await this.$alert(res.msg, "提示", {type: 'error'})
                    }
                }
            })
        },
        //表单注入数据
        setData(data, parent) {
            Object.assign(this.form, data)
            Object.assign(this.defaultValue, parent)
        },
        changeSelect(data) {
            this.form.parentId = data.id || '0'
            this.defaultValue.id = data.id || '0'
            this.defaultValue.menuName = data.menuName
        }
    }
}
</script>

<style scoped>

</style>
